<template>
        <div class="Adetailrange">
            <div class="detailrange" v-loading="loading">
                <header>
                    {{ fieldAlias[key] || '' }}
                </header>
                <div class="detailrangeContent htmlcontent" v-html="info"></div>
                <div class="share"></div>
            </div>
        </div>
</template>
<script>
import { config } from '@/api/config.js'

export default {
    data() {
        return {
            loading: false,
            key: '',
            info: '',
            fieldAlias: {
				service_agreement: "用户协议",
				privacy_agreement: "隐私政策",
				use_agreement_copyright: "使用协议和版权申明",
				children_privacy_agreement: "儿童隐私政策",
                user_privacy_agreement: "用户隐私保护指引"
			}
        }
    },
    created() {
        this.key = this.$route.query.key
    },
    watch: {
        $route(to, from) {
            if (this.$route.query.key) {
                this.key = this.$route.query.key
                this.getInfo()
            }
        }
    },
    mounted() {
        this.getInfo()
    },
    methods: {
        getInfo() {
            this.loading = true
            let param = [this.key]
            config({ key: param }).then(res => {
                this.loading = false
                if (res.error === 0) {
                    this.info = res.data[this.key]
                }
            })
        }
    }
}

</script>

<style scoped lang="scss">
.Adetailrange {
    background: #fff;
    padding: 2rem;
    height: 100%;
    border-radius: 2rem;
    overflow: hidden;
    .detailrange {
        // width: 1200px;
        margin: auto;
        height: 100%;
        // background: bisque;
        header {
            // width: 1200px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 28px;
            color: #333333;
        }

        .time {
            // width: 1200px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #747474;

            .Xwidth {
                width: 2px;
                height: 12px;
                background: #a3a3a3;
            }
        }

        .detailrangeContent {
            // width: 1200px;
            height: calc(100% - 80px);
            font-size: 16px;
            color: #666666;
            overflow: auto;
            &::-webkit-scrollbar {
                width: 6px;
                height: 1px;
            }
            &::-webkit-scrollbar-thumb { 
                border-radius: 5px;
                background-color:#019E69;
            }
            &::-webkit-scrollbar-track { 
                background: #fff;
                border-radius: 5px;
            }
            p {
                width: 100%;
                margin-top: 16px
            }
        }

        .share {
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;

            .Qq {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                background: #43b5f0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>
